<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="theme-color" content="#db5945">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<title>发布代言</title>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<link rel="stylesheet" type="text/css" href="css/loading.css"/>
		<link rel="stylesheet" type="text/css" href="css/repupLoadImg.css"/>
		<!--<link rel="stylesheet" type="text/css" href="css/releaseRepresent.css"/>-->
		<style>
			.release_upload{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: nowrap;
}
.release_upload img{
	margin: 10px 3px 10px 0px;
	width: 105px;
	height: 105px;
}
.release_upload_tip{
	color: #BFBFBF;
	margin-bottom: 15px;
}
#by_represent{
	width: 95%;
	height:100px;
	outline: none;
	margin-top: 10px;
	border: 1px solid #AEAEAE;
	padding-left: 4px;
	resize: none;
	outline: none;
	line-height: 20px;
	background: none;
}

			 #repupLoadImg  
	        	{  
	            padding: 0;
	            background:rgb(0,0,0);
	            font-size: 12px;  
	            color: #666; 
	            display: none;
				position: fixed;
			    z-index: 1000000;
				height:100%;
			    width: 100%;
	        }  
	        button {
			    position: relative;
			    overflow: visible;
			    background: #fff;
			}
	        a  
	        {  
	            text-decoration: none;  
	            color: #333;  
	        }
			.btn-confirm{
				display: flex;
				justify-content: space-between;
				position: fixed;
				bottom: 50px;
				left: 50%;
				width: 80%;
				background: #0D0D0D;
				-webkit-transform: translateX(-50%);
				-moz-transform: translateX(-50%);
				transform: translateX(-50%);
				-webkit-border-radius: 50px;
				-moz-border-radius: 50px;
				border-radius: 50px;
				border: 1px solid #34312C;
			}
	        #clipArea {
			    margin: 0 5px;
			    height: 350px;
				bottom: -73px;
			}
			#clipBtn {
			  background: none;
			    width: 50%;
			    height: 50px;
			    line-height: 50px;
				color: #FFF;
			}
			#view{
			    margin: 0 auto;
			    width: 200px;
			    height: 200px;
				display: none;
			}
			#ajaxBtn{
				width: 50%;
				height: 50px;
				color: #FFF;
				background: none;
				border-right: 1px solid #34312C;
			}
		</style>
		<style>
			.btn1{
				position: relative;
			}
			.btn1 span{
				position: absolute;
				bottom: 13px;
				left: 0px;
				font-size: 9px;
				color: #666;
				height: 32px;
				width:96%;
				text-align: center;
			}
			.btn2{
				position: relative;
			}
			.btn2 span{
				position: absolute;
				bottom: 13px;
				left: 0px;
				font-size: 9px;
				color: #666;
				height: 32px;
				text-align: center;
				width:96%;
				text-align: center;
			}
			.btn3{
				position: relative;
			}
			.btn3 span{
				width:96%;
				height: 32px;
				position: absolute;
				bottom: 12px;
				left: 0px;
				font-size: 9px;
				color: #666;
				text-align: center;
			}
		</style>
	</head>
	<body>
	<div id="repupLoadImg">
		<div id="clipArea"></div>
		<div id="view"></div>
		<div class="btn-confirm">
			<button id="ajaxBtn">取消</button>
			<button id="clipBtn">上传</button>
		</div>
	</div>
	
		<div class="form">
			<!--<p class="represent"><label for="re_price">价   &nbsp;   &nbsp;格（元）</label><input type="text" name="price" id="re_price" value=""  oninput="num(this)" maxlength="11"  placeholder="请输入消费金额"/></p>
			<div class="re_fee_tip">
				<span>代言费（元）</span><span id="endorsement_fee">价格的1%</span>
			</div>-->
			<!--<p class="represent"><label for="re_brand">品  &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;牌：&nbsp;&nbsp;</label><span id="re_brand" /></span></p>-->
			<div class="re_img">
				<p>图片信息</p>
				<div class="release_upload" id="container">
					<button class="btn1">
						<img class="release_upload1"    src="image/represent/release_bg_d.png"  />
						<input type="file" id="file1" accept="image/*" />
						<span>喜欢不如分享，晒出你和宝贝的合照</span>

					</button>
					<button class="btn2">
						<img class="release_upload2"    src="image/represent/release_bg_d.png"  />
						<input type="file" id="file2" accept="image/*"/>
						<span>秀出自己代言的宝贝</span>
					</button>
					<button class="btn3">
						<img class="release_upload3"    src="image/represent/release_bg_d.png"  />
						<input type="file" id="file3" accept="image/*" />
						<span>购物凭证，30天内有效</span>
					</button>
					<!--<img class="release_upload2" id="pickfiles1" src="image/represent/release_upload2.png"  />-->
					<!--<img class="release_upload3" id="pickfiles2" src="image/represent/release_upload3.png"  />-->
					<div class="spinner">
					  <div class="bounce1"></div>
					  <div class="bounce2"></div>
					  <div class="bounce3"></div>
						<p class="pre"></p>
					</div>

				</div>
				<!--<p class="release_upload_tip">(图片清晰完整更利于通过审核)</p>-->
			</div>
			<!--<p>为消费代言</p>
			<textarea name="" id="by_represent" value="" placeholder="填写你的代言心得，为更多小伙伴出谋策划~（不低于20字）" /></textarea>
			<p class="re_inp_num"><span>1000</span><span>/1000</span></p>-->
		</div>
		<!--<div id="invitation_code">-->
			<!--<label for="invitaCode">快速审核码:  </label><input type="text" name="invitaCode" id="invitaCode" value="" placeholder="请输入审核码(非必填)"/>-->
		<!--</div>-->
		<!--<div id="issue">发布</div>-->
		<!-- 空格 -->
		<div style="height: 4rem;"></div>
		<script src="js/jquery-1.11.0.js"></script>
		<script src="js/iscroll-zoom.min.js"></script>
		<script src="js/hammer.min.js"></script>
		<script src="js/jquery.photoClip.js"></script>
		<script src="js/base.js"></script>
		<script src="js/com.js"></script>
		<script type="text/javascript" src="js/public.js" ></script>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js "></script>
		<script src="https://cdn.staticfile.org/plupload/2.1.7/plupload.full.min.js"></script>
		<script src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.js"></script>
		<!--<script src="js/releaseRepresent.js"></script>-->
		<script src="js/weiapi.js"></script>
		<script type="text/javascript">
			$("#ajaxBtn").on("click",function(){
				$("#repupLoadImg").hide();
			})
			$("#file1").change(function(){
				$("#repupLoadImg").show();
				$(".photo-clip-rotateLayer img").remove();
				$("#view").css("background-image", "url()");
				$("#clipArea .photo-clip-view:nth-child(1)").css("z-index",2);
			})
			$("#file2").change(function(){
				$("#repupLoadImg").show();
				$(".photo-clip-rotateLayer img").remove();
				$("#view").css("background-image", "url()");
				$("#clipArea .photo-clip-view:nth-child(3)").css("z-index",2);
			})
			$("#file3").change(function(){
				$("#repupLoadImg").show();
				$(".photo-clip-rotateLayer img").remove();
				$("#view").css("background-image", "url()");
				$("#clipArea .photo-clip-view:nth-child(5)").css("z-index",2);
			})
			$("#clipArea").photoClip({
				    width:300,
				    height:300,
				    file: "#file1",
				    view: "#view",
				    ok: "#clipBtn",
				    loadStart: function() {
				        console.log("照片读取中");
				    },
				    loadComplete: function() {
				        console.log("照片读取完成");
				    },
				    clipFinish: function(dataURL) {
		      	 	 console.log(dataURL);
//						$("#clipBtn").unbind('click');
//						$("#clipBtn").click(function(){
							$("#repupLoadImg").hide();
							Json.zhebg();
							$(".spinner").show();
							$.ajax({
								type:"psot",
								url:'index.php',
								error: function() {
									alert ("ajax请求失败");
								},
								success: function(data) {
									console.log(data);
									token = data;
									sessionStorage.setItem('token',token);
									putb64(dataURL,token);

								}							
							});
//						});

						function putb64(dataURL,token){
                        /*picUrl用来存储返回来的url*/
                        var picUrl;
                        /*把头部的data:image/png;base64,去掉。（注意：base64后面的逗号也去掉）*/
							picBase=dataURL.substring(22);
							picBase = picBase.substr(1);
                        /*通过base64编码字符流计算文件流大小函数*/
                        function fileSize(str) {
                            var fileSize;
                            if(str.indexOf('=')>0)  {
                                var indexOf=str.indexOf('=');
                                str=str.substring(0,indexOf);//把末尾的’=‘号去掉
                            }
                            fileSize=parseInt(str.length-(str.length/8)*2);
                            return fileSize;
                        }
                        /*把字符串转换成json*/
                        function strToJson(str) { 
                            var json = eval('(' + str + ')'); 
                            return json; 
                        } 
                        //http://upload-z2.qiniu.com/putb64/ 只适用于七牛云华南空间 因为我的是七牛云华南空间，如果不是华南空间需要根据七牛云文档进行更改
                        var url ="http://up-z0.qiniu.com/putb64/"+fileSize(picBase);
                        var xhr = new XMLHttpRequest();
						console.log(123456)
                        xhr.onreadystatechange=function(){

                            if (xhr.readyState==4){

                                var keyText=xhr.responseText;

                                /*返回的key是字符串，需要装换成json*/
                                keyText=strToJson(keyText);
                                /* http://image.haoqiure.com/ 是我的七牛云空间网址，keyText.key 是返回的图片文件名*/
                                picUrl="http://oz1auxyih.bkt.clouddn.com/"+keyText.key;
                                console.log(picUrl);

                                $(".release_upload1").attr("src",picUrl)   //将图片链接显示在输入框去
                                 $(".btn1 span").text("");
								$(".spinner").hide();
								$(".div_obj").remove();

                            }
                        }
//							xhr.upload.onprogress=function(ev){
//								$('.pre').text("");
//								console.log(ev.total);
//								console.log(ev.loaded);
//								var n1 = ev.loaded/ev.total;
//								var con1 = n1*100;
//								var pre1 = parseInt(con1)+"%";
//								$('.pre').text(pre1);
//							}
                        xhr.open("POST", url, true); 
                        xhr.setRequestHeader("Content-Type", "application/octet-stream");

                        xhr.setRequestHeader("Authorization", "UpToken "+token+"");
                        xhr.send(picBase);
                     }

				    }
				});
				$("#clipArea").photoClip({
				    width: 300,
				    height: 300,
				    file: "#file2",
				    view: "#view",
				    ok: "#clipBtn",
				    loadStart: function() {
				        console.log("照片读取中");
				    },
				    loadComplete: function() {
				        console.log("照片读取完成");
				       
				    },
				    clipFinish: function(dataURL) {
				        console.log(dataURL);
//						$("#clipBtn").unbind('click');
//						$("#clipBtn").click(function(){
							//Json.zhebg();
							$(".spinner").show();
							$("#repupLoadImg").hide();
						$("#repupLoadImg").hide();
							Json.zhebg();
							$(".spinner").show();
							$.ajax({
								type:"psot",
								url:'index.php',
								error: function() {
									alert ("ajax请求失败");
								},
								success: function(data) {
									console.log(data);
								}							
							});
//						});


						function putb64(dataURL,token){
							/*picUrl用来存储返回来的url*/
							var picUrl;
							/*把头部的data:image/png;base64,去掉。（注意：base64后面的逗号也去掉）*/
							picBase=dataURL.substring(22);
							picBase = picBase.substr(1)
							/*通过base64编码字符流计算文件流大小函数*/
							function fileSize(str) {
								var fileSize;
								if(str.indexOf('=')>0)  {
									var indexOf=str.indexOf('=');
									str=str.substring(0,indexOf);//把末尾的’=‘号去掉
								}
								fileSize=parseInt(str.length-(str.length/8)*2);
								return fileSize;
							}
							/*把字符串转换成json*/
							function strToJson(str) {
								var json = eval('(' + str + ')');
								return json;
							}
							//http://upload-z2.qiniu.com/putb64/ 只适用于七牛云华南空间 因为我的是七牛云华南空间，如果不是华南空间需要根据七牛云文档进行更改
							var url = "http://up-z0.qiniu.com/putb64/"+fileSize(picBase);
							var xhr = new XMLHttpRequest();
							xhr.onreadystatechange=function(){
								if (xhr.readyState==4){
									var keyText=xhr.responseText;
									/*返回的key是字符串，需要装换成json*/
									keyText=strToJson(keyText);
									/* http://image.haoqiure.com/ 是我的七牛云空间网址，keyText.key 是返回的图片文件名*/
									picUrl="http://oz1auxyih.bkt.clouddn.com/"+keyText.key;
									console.log(picUrl);
									$(".release_upload2").attr("src",picUrl)   //将图片链接显示在输入框去
									 $(".btn2 span").text("");
									$(".spinner").hide();
									$(".div_obj").remove();
									$("#repupLoadImg").hide();
								}
							}
//							xhr.upload.onprogress=function(ev){
//								$('.pre').text("");
//								console.log(ev.total);
//								console.log(ev.loaded);
//								var n2 = ev.loaded/ev.total;
//								var con2 = n2*100;
//								var pre2 = parseInt(con2)+"%";
//								$('.pre').text(pre2);
//							}
							xhr.open("POST", url, true);
							xhr.setRequestHeader("Content-Type", "application/octet-stream");
							xhr.setRequestHeader("Authorization", "UpToken "+token+"");
							xhr.send(picBase);
						}
				    }
				});
				$("#clipArea").photoClip({
				    width: 300,
				    height:300,
				    file: "#file3",
				    view: "#view",
				    ok: "#clipBtn",
				    loadStart: function() {
				        console.log("照片读取中");
				    },
				    loadComplete: function() {
				        console.log("照片读取完成");
				        
				    },
				    clipFinish: function(dataURL) {
				        console.log(dataURL);
//						$("#clipBtn").unbind('click');
//						$("#clipBtn").click(function(){
						//	Json.zhebg();
							$(".spinner").show();
							$("#repupLoadImg").hide();
						$("#repupLoadImg").hide();
							Json.zhebg();
							$(".spinner").show();
							$.ajax({
								type:"psot",
								url:'index.php',
								error: function() {
									alert ("ajax请求失败");
								},
								success: function(data) {
									console.log(data);
								}							
							});
//						});

						function putb64(dataURL,token){
							/*picUrl用来存储返回来的url*/
							var picUrl;
							/*把头部的data:image/png;base64,去掉。（注意：base64后面的逗号也去掉）*/
							picBase=dataURL.substring(22);
							picBase = picBase.substr(1)
							/*通过base64编码字符流计算文件流大小函数*/
							function fileSize(str) {
								var fileSize;
								if(str.indexOf('=')>0)  {
									var indexOf=str.indexOf('=');
									str=str.substring(0,indexOf);//把末尾的’=‘号去掉
								}
								fileSize=parseInt(str.length-(str.length/8)*2);
								return fileSize;
							}
							/*把字符串转换成json*/
							function strToJson(str) {
								var json = eval('(' + str + ')');
								return json;
							}
							//http://upload-z2.qiniu.com/putb64/ 只适用于七牛云华南空间 因为我的是七牛云华南空间，如果不是华南空间需要根据七牛云文档进行更改
							var url = "http://up-z0.qiniu.com/putb64/"+fileSize(picBase);
							var xhr = new XMLHttpRequest();
							xhr.onreadystatechange=function(){
								if (xhr.readyState==4){
									var keyText=xhr.responseText;
									/*返回的key是字符串，需要装换成json*/
									keyText=strToJson(keyText);
									/* http://image.haoqiure.com/ 是我的七牛云空间网址，keyText.key 是返回的图片文件名*/
									picUrl="http://oz1auxyih.bkt.clouddn.com/"+keyText.key;
									console.log(picUrl);
									$(".release_upload3").attr("src",picUrl);  //将图片链接显示在输入框去
									$(".btn3 span").text("");
									$(".spinner").hide();
									$(".div_obj").remove();
								}
							}
//							xhr.upload.onprogress=function(ev){
//								$('.pre').text(pre);
//								console.log(ev.total);
//								console.log(ev.loaded);
//								var n3 = ev.loaded/ev.total;
//								var con3 = n3*100;
//								var pre3 = parseInt(con3)+"%";
//								$('.pre').text(pre3);
//							}
							xhr.open("POST", url, true);
							xhr.setRequestHeader("Content-Type", "application/octet-stream");
							xhr.setRequestHeader("Authorization", "UpToken "+token+"");
							xhr.send(picBase);
						}
				    }
				});
		</script>
	</body>
</html>
